@charset "UTF-8";
@import 'config';

.header {
  @include h(88);
  background-color: #da0900;
  .content {
    position: relative;
    @include w(710);
    margin: 0 auto;
    .back {
      display: inline-block;
      position: absolute;
      @include l(30);
      @include lh(88);
      @include mt(24);
    }
    .title {
      @include fs(36);
      color: white;
      display: inline-block;
      position: absolute;
      left: 42%;
      @include w(150);
      @include lh(88);
    }
    .set {
      display: inline-block;
      position: absolute;
      @include r(30);
      @include lh(88);
      @include mt(24);
    }
  }
}

.main {
  .tab {
    @include w(710);
    margin: 0 auto;
    span {
      @include mag(0, 30, 0, 30);
      @include fs(24);
      position: relative;
      &:after {
        content: '';
        display: inline-block;
        position: absolute;
        @include t(45);
        @include l(-15);
        background-color: #f65e02;
        height: 1px;
        @include w(100);
      }
    }
    span:nth-of-type(1) {
      &:after {
        @include l(-25);
      }
    }
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #e7e7e7;
    border: 1px solid transparent;
    @include mt(15);
    li {
      background-color: white;
      @include pt(10);
      @include mt(30);
      @include h(350);
      @include mb(20);
      position: relative;
      .close{
        text-align: right;
        @include fs(24);
        color: red;
        @include lh(50);
      }
      .bdcolor{
        background-color: #f3f3f3;
        img {
          @include w(188);
          @include h(188);
          @include ml(20);
          display: inline-block;
        }
        .content {
          position: relative;
          display: inline-block;
          @include w(420);
          vertical-align: top;
          h4 {
            @include fs(24);
            @include lh(30);
            @include w(300);
            font-style: normal;
            font-weight: normal;
            @include mt(10);
            @include mb(30);
          }
          .colour {
            display: inline-block;
            @include mt(20);
            color: #999999;
            font-style: normal;
            @include fs(24);
            i {
              font-style: normal;
            }
          }
          .price {
            @include fs(24);
            display: block;
            position: absolute;
            @include r(-20);
            @include t(10);
            i{
              font-style: normal;
              color: red;
            }
          }
          strong {
            @include fs(24);
            display: inline-block;
            position: relative;
            @include r(-220);
            @include t(0);
            font-style: normal;
          }

        }
      }
      .subtotal{
        @include ml(200);
        display: inline-block;
        .num{
          @include fs(24);
          color: #666666;
          display: inline-block;
          i{
            @include ml(-6);
            font-style: normal;
          }
        }
        .money{
          @include fs(24);
          color: #666666;
          display: inline-block;
          i{
            @include ml(-6);
            font-style: normal;
          }
        }
        .freight{
          color: #666666;
          @include fs(24);
          display: inline-block;
          i{
            font-style: normal;
          }
        }
      }
      .del{
        position: absolute;
        @include r(10);
        @include t(310);
        @include fs(24);
        color: #666666;
        border: 1px solid #a0a0a0;
        @include bdr(10);
        display: inline-block;
        @include w(128);
        @include lh(38);
        text-align: center;
      }
    }
  }
}